<script setup lang="ts">
import {ref} from "vue";
import {appointment} from "@/http/Personal center";
import EachAppointment from "@/components/gerenzhongxin/Content/Myconsultation/appointment/EachAppointment.vue";
import router from "@/router";



const onClickLeft = () => history.back();
const active = ref(0);

const appointmentList = ref<any[]>([])
appointment().then(res => {
    // console.log(res)
    if (res.code == 200) {
        appointmentList.value = res.rows
    } else if (res.code == 401) {
        router.push('/denglu')
    }

})
</script>

<template>
    <div>

        <div>
            <van-nav-bar
                fixed
                placeholder
                    title="我的预约"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
            <van-tabs v-model:active="active" color="#CEAFF8" >
                <van-tab title="全部">
                    <each-appointment v-for="item in appointmentList" :key="item.id"
                                      :appointmentInfo="item"></each-appointment>
                </van-tab>
                <van-tab title="待开始">
                    <template v-for="item in appointmentList" :key="item.id">
                        <each-appointment :appointmentInfo="item" v-if="item.status==0"></each-appointment>
                    </template>
                </van-tab>
                <van-tab title="进行中">
                    <template v-for="item in appointmentList" :key="item.id">
                        <each-appointment :appointmentInfo="item" v-if="item.status==4"></each-appointment>
                    </template>
                </van-tab>
                <van-tab title="已结束">
                    <template v-for="item in appointmentList" :key="item.id">
                        <each-appointment :appointmentInfo="item" v-if="item.status==2"></each-appointment>
                    </template>
                </van-tab>
                <van-tab title="已取消">
                    <template v-for="item in appointmentList" :key="item.id">
                        <each-appointment :appointmentInfo="item" v-if="item.status==3"></each-appointment>
                    </template>
                </van-tab>
            </van-tabs>
        </div>


    </div>
</template>

<style scoped lang="less">

.time {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  .Start {
    width: 16%;

    .Month {
        width: 20%;
      font-size: 14px;
    }

    .Hour {
      font-size: 20px;
    }

    .tim {
      font-size: 12px;
      color: gray;
    }
  }

  .Process {
    border-bottom: 2px solid gray;
    width: 40%;
    height: 33px;

    .timet {
      width: 60px;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      text-align: center;
      margin: 22px auto;
      font-size: 12px;
      background-color: #F2F3F4;
    }
  }
}

.there {
  width: 96%;
  margin-top: 10px;
  border-top: 1px solid #F2F3F4;
  padding: 10px;
  display: flex;

  .picter {
    width: 11%;
    height: 40px;
    border-radius: 6px;

    #woes {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }

  .information {
    margin-left: 5px;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      width: 70%;
      display: flex;
      justify-content: space-between;

      span {
        font-size: 14px;
      }

      .one {
        height: 15px;
        border-left: 1px solid gray;
      }

      .zix {
        color: #c0bdbd;
        font-size: 14px;
      }
    }

    .button {
      font-size: 12px;
      color: #c0bdbd;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}


</style>